<template>
  <div class="padding">
    <overview />
    <a-card>
      <div class="flex-between margin-bottom">
        <a-radio-group v-model:value="params.type">
          <a-radio-button :value="0">全部</a-radio-button>
        </a-radio-group>
        <a-space>
          <Create />
          <a-input-search placeholder="输入客户名称搜索" />
        </a-space>
      </div>
      <a-table :columns="columns"
               :data-source="dataSource"
               :row-selection="{}"
               :pagination="false">
      </a-table>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import Overview from './components/Overview.vue'
import { TableColumnsType } from "ant-design-vue";
import { reactive } from 'vue';
import Create from './components/Create.vue';

const columns: TableColumnsType = [
  { key: 'name', title: '客户名称', dataIndex: 'name' },
  { key: 'type', title: '类型', width: 120 },
  { key: 'tag', title: '标签', width: 120 },
  { key: 'unpaid', title: '未付款', width: 120,sorter:(a,b)=> a.unpaid - b.unpaid},
  { key: 'amount', title: '金额', width: 160,sorter:(a,b)=> a.amount - b.amount},
  { key: 'update_time', title: '更新时间', width: 160 },
  { key: 'action', title: '管理', width: 240 }
]


let dataSource: any[] = []

const params = reactive({
  type: <number>0
})


for (let i = 0; i < 20; i++) {
  dataSource.push({ id: i + 1, name: '客户名称' + i })
}
</script>

<style scoped></style>